<template>
  <div class="species-observation-result container-bottom-20">
    <CardBox title="物候观测记录"></CardBox>
    <div class="content-container">
      <el-table
              :data="tableData"
              :height="257"
              stripe
              @row-click="handleRowClick"
              style="width: 100%">
        <el-table-column
                prop="plantName"
                label="名称"
                width="100"
                show-overflow-tooltip>
          <!--          <template #default="scope">-->
          <!--            <span class="ellipsis">{{ scope.row.plantName }}</span>-->
          <!--          </template>-->
        </el-table-column>
        <el-table-column
                prop="specializedGarden"
                label="专类园"
                width="120"
                show-overflow-tooltip>
          <template #default="scope">
            <span class="ellipsis">{{ scope.row.specializedGarden }}</span>
          </template>
        </el-table-column>
        <el-table-column
                prop="tag"
                label="物候期"
                width="120"
                show-overflow-tooltip>
          <template #default="scope">
            <span class="ellipsis">{{ scope.row.tag }}</span>
          </template>
        </el-table-column>
        <el-table-column
                prop="observationTime"
                label="观测时间"
                style="font-family: DIN Pro;"
                show-overflow-tooltip>
          <template #default="scope">
            <span class="ellipsis">{{ scope.row.observationTime }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import CardBox from '@/components/Global/CardBox.vue'
import { EventBus } from '../../utils/event-bus'
export default {
  components: {
    CardBox
  },
  mounted() {
    this.$nextTick(() => {
      // this.getResult();
    })
  },
  created() {
    EventBus.$on('sent-registration', (message) => {
      this.plant = message;
      this.getResult();
    });
    // EventBus.$on('set-device-type', (message) => {
    //   this.type=message;
    //   this.getResult();
    // })
  },
  data() {
    return {
      plant:null,
      type:'hongwai',
      tableData: null
    }
  },
  methods: {
    getResult() {
      if (this.plant) {
        this.$api.patrol.getParolByRegistration(this.plant.introductionRegistrationNumber).then(res => {
          this.tableData = res;
          EventBus.$emit('sent-record', this.tableData[0])
        });
      }
    },
    handleRowClick(row, column, cell, event) {
      // 这里可以根据需要处理点击事件
      // 例如：显示详情弹窗、导航到其他页面等
      EventBus.$emit('sent-record', row)
    },
    updatespeciesResultData(deviceData){
      this.tableData = deviceData.datas
    }
  }
}
</script>

<style lang="scss" scoped>
.species-observation-result {
  .content-container {
    height: 242px;
    padding: 10px 0;
    margin-bottom: 20px;
  }

  :deep(.el-table) {
    background: transparent;
    font-size: 14px;
    
    &::before {
      display: none;
    }
    
    tr {
      background: transparent;
      height: 28px;
    }

    .el-table__body {
      tr {
        &.el-table__row--striped td {
          background: rgba(65, 123, 214, 0.19);
        }
        &:hover{
          td {
            color: #07FFE5 !important;
            background: rgba(65, 123, 214, 0.19) !important;
          }
        }
      }
    }
    
    th.el-table__cell {
      background: rgba(65, 123, 214, 0.19) !important;
      border-bottom: 1px solid rgba(0, 150, 255, 0.3);
      color: #fff !important;
      font-weight: 500;
      padding: 4px 10px;
      height: 28px;
      line-height: 20px;
      
      &.is-leaf {
        border-bottom: 1px solid rgba(0, 150, 255, 0.3);
      }

      &:hover {
        background: rgba(65, 123, 214, 0.19) !important;
        color: #fff !important;
      }
    }
    
    td.el-table__cell {
      background: transparent;
      border-bottom: 1px solid rgba(0, 150, 255, 0.3);
      color: #fff;
      padding: 4px 10px;
      height: 28px;
      line-height: 20px;
      cursor: pointer;
    }

    .el-table__body tr.hover-row > td.el-table__cell {
      background: rgba(65, 123, 214, 0.19);
    }

    .el-table__body tr:hover > td.el-table__cell {
      background: rgba(65, 123, 214, 0.19);
    }

    .el-table__body-wrapper {
      overflow-x: hidden;
    }
  }
}
</style>
